<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <h1 style="font-family: 新宋体;font-size: larger">系统课程管理中心</h1>
                </el-col>
                <el-col :span="6" v-if="videoControl||textControl">
                    <el-statistic title="课程总数" :value="totalCount" />
                </el-col>
                <el-col :span="6" v-if="videoExamining || textExamining">
                    <el-statistic title="待审核课程总数" :value="totalCount" />
                </el-col>
                <el-col :span="6" v-if="videoDelete || textDelete">
                    <el-statistic title="待删除课程总数" :value="totalCount" />
                </el-col>
                <el-col :span="6" v-if="videoControl||textControl">
                    <el-statistic title="精品课程总数" :value="totalVip" />
                </el-col>
                <el-col :span="6" v-if="videoControl||textControl">
                    <el-statistic title="非精品课程" :value="totalOrdinary" />
                </el-col>
            </el-row>
        </el-header>
        <el-row :gutter="0">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
                <el-input v-model="pageInfo.search" size="default" placeholder="Type to search" />
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
                <el-button type="primary" @click="myPage" size="large">搜索</el-button>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple" />
                <el-button type="warning" @click="reset" size="large">重置</el-button>
            </el-col>

        </el-row>

        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="课程名" prop="name" width="150px" />
                <el-table-column label="课程类别" prop="type" width="100px" />
                <el-table-column label="课程标签" prop="label">
                    <template #default="scope">
                        <el-tag size="large" effect="plain" v-for="(item) in scope.row.label.split('&')"
                            v-if="scope.row.label != null && scope.row.label != ''">{{ item }}

                        </el-tag>
                        <!--                        {{scope.row.label}}-->
                        <!--                        {{scope.row}}-->
                    </template>
                </el-table-column>
                <el-table-column label="精品课程" prop="vip" />
                <el-table-column label="任课教师" prop="tchname" />
                <!------------------------------------------------ Control Start------------------------------------->
                <el-table-column align="right" fixed="right" v-if="videoControl || textControl">
                    <template #default="scope">
                        <CoursePreview :course="scope.row" :videoControl="videoControl" :textControl="textControl"
                            :videoExamining="videoExamining" :textExamining="textExamining"></CoursePreview>
                        <courseInfo :scope="scope.row"></courseInfo>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除课程
                        </el-button>
                    </template>
                </el-table-column>
                <!------------------------------------------------ Control End -------------------------------------->

                <!------------------------------------------------ Examining Start----------------------------------->
                <el-table-column align="right" fixed="right" v-if="videoExamining || textExamining">
                    <template #default="scope">
                        <CoursePreview :course="scope.row" :videoControl="videoControl" :textControl="textControl"
                            :videoExamining="videoExamining" :textExamining="textExamining"></CoursePreview>
                        <el-button size="small" type="success" @click="handleAccept(scope.$index, scope.row)">通过
                        </el-button>
                        <courseInfo :scope="scope.row"></courseInfo>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">拒绝
                        </el-button>
                    </template>
                </el-table-column>
                <!------------------------------------------------ Examining End ----------------------------------->

                <!------------------------------------------------ Delete Start------------------------------------->
                <el-table-column align="right" fixed="right" v-if="videoDelete || textDelete">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                        <courseInfo :scope="scope.row"></courseInfo>
                        <el-button size="small" type="success" @click="handleCancel(scope.$index, scope.row)">拒绝
                        </el-button>
                    </template>
                </el-table-column>
                <!------------------------------------------------ Delete End ------------------------------------->
            </el-table>
            <el-pagination background layout="prev, pager, next" :page-size="pageInfo.pageSize" :total="totalCount"
                @current-change="changePageNum" />
        </el-main>
    </el-container>

<!--    <h1>{{ controllInfo }}</h1>-->
<!--    <h1>{{ videoControl }}::{{ textControl }}::{{ videoExamining }}::{{ textExamining }}::{{ videoDelete }}::{{-->
<!--        textDelete }}</h1>-->

</template>
<script setup>
    import CoursePreview from '@/components/CreationCenter/CoursePreview'
    import { ref, reactive, onMounted, nextTick, computed } from 'vue'
    import { useStore } from 'vuex'
    import { adminSelectAllCourse, adminSelectAllNotExamineCourse, adminSelectDeletingCourse } from '@/api/admin'
import { adminSelectAllTextual, adminSelectAllNotExamineTextual, adminSelectDeletingTextual } from '@/api/admin'
    import { courseOrdinaryCount, courseVipCount, editCourse, 
    deleteCourse, updateCourse, updateIsExamine, updateIsDelete2Zero
    , deleteTextual } from '@/api/course'
    import {updateTextExamine, updateTextIsDelete2Zero} from '@/api/textualmaterial'
    import { useRouter } from 'vue-router'
    import { ElMessage, ElMessageBox } from "element-plus";
    import { socket } from "@/utils/webSocket";

    const props = defineProps(['ControllInfomation'])
    const controllInfo = props.ControllInfomation;

const videoControl = props.ControllInfomation=="1";
const textControl = props.ControllInfomation == "2";
const videoExamining = props.ControllInfomation == "3";
const textExamining = props.ControllInfomation == "4";
const videoDelete = props.ControllInfomation == "5";
const textDelete = props.ControllInfomation == "6";
    //整体表格函数
    //表格的参数
    const tableData = ref([])
    const store = useStore();
    const router = useRouter();
    const editDialogVisible = ref(false);


const pageInfo = reactive({ pageNum: 1, pageSize: 8, search: '',controllInfo: controllInfo,});
    const totalCount = ref(0);
    const totalOrdinary = ref();
    const totalVip = ref();

    const textInfo=ref({

    });


    onMounted(() => {
        myPage();
    });
    //分页函数
    const myPage = () => {
        switch (controllInfo){
            case 1:
            case 3:
            case 5:
                adminSelectAllCourse(pageInfo).then((res) => {
                    // console.log(res.data)
                    if (res.data.total > 0) {
                        // res.data.list.forEach((item)=>{
                        //     tableData.value.push(item);
                        // })
                        tableData.value = res.data.list;
                        totalCount.value = res.data.total;
                    } else {
                        tableData.value = []
                        // totalCount.value = res.data.total;
                        // ElMessage.warning("未检索到相关课程")
                    }

                })
                courseOrdinaryCount().then((res) => {
                    totalOrdinary.value = res.data;
                })
                courseVipCount().then((res) => {
                    totalVip.value = res.data;
                })
                break;
            case 2:
            case 4:
            case 6:
                
                adminSelectAllTextual(pageInfo).then((res) => {
                    // console.log(res.data)
                    if (res.data.total > 0) {
                        // res.data.list.forEach((item)=>{
                        //     tableData.value.push(item);
                        // })
                        tableData.value = res.data.list;
                        totalCount.value = res.data.total;
                    } else {
                        tableData.value = []
                        // totalCount.value = res.data.total;
                        // ElMessage.warning("未检索到相关课程")
                    }

                })
                courseOrdinaryCount().then((res) => {
                    totalOrdinary.value = res.data;
                })
                courseVipCount().then((res) => {
                    totalVip.value = res.data;
                })
                break;
        }
        
    };
    //改变页数函数
    const changePageNum = (pageNum) => {
        pageInfo.pageNum = pageNum
        myPage()
    }
    //搜索重置函数
    const reset = () => {
        pageInfo.search = '';
        myPage();
    }
    const queryCondition = ref({state:0, type: 'message',content:'' });

    const init = () => {
        queryCondition.value.type = 'message';
        // console.log('message....')
        socket.sendMsg(JSON.stringify(queryCondition.value));
    };
    //删除函数
    const handleDelete = (index, row) => {
        ElMessageBox.confirm(
            '是否要删除该课程',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                if (controllInfo == "1" || controllInfo == "3" || controllInfo == "5") {
                    deleteCourse(row.id).then((res) => {
                        // socket.initWebSocket(`ws://localhost:8081/notice/` + row.tid);
                        // queryCondition.value.content = `课程：${row.name}已经被成功删除`;
                        // init();
                        setTimeout(() => {
                            // init();
                            location.reload();
                        }, 1000); // 两秒后刷新页面
                    })
                }
                else if(controllInfo=="2"||controllInfo=="4"||controllInfo=="6"){
                    deleteTextual(row.id).then((res) => {
                        // socket.initWebSocket(`ws://localhost:8081/notice/` + row.tid);
                        // queryCondition.value.content = `文档：${row.name}已经被成功删除`;
                        // init();
                        setTimeout(() => {
                            // init();
                            location.reload();
                        }, 1000); // 两秒后刷新页面
                    })
                }

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
            
    }
//拒绝函数
    const handleCancel = (index, row) => {
        if (controllInfo == "1" || controllInfo == "3" || controllInfo == "5"){
            updateIsDelete2Zero(row.id).then((res) => {
                // console.log(`成功删除${row.name}`)
                ElMessage.error(`撤销删除${row.name}`);
                // socket.initWebSocket(`ws://localhost:8081/notice/` + row.tid);
                // queryCondition.value.content = `课程：${row.name}未通过删除申请`;
                // init();
                setTimeout(() => {
                    // init();
                    location.reload();
                }, 1000); // 两秒后刷新页面
            })
        }else if (controllInfo == "2" || controllInfo == "4" || controllInfo == "6"){
            updateTextIsDelete2Zero(row.id).then((res)=>{
                ElMessage.error(`撤销删除${row.name}`);
                setTimeout(() => {
                    location.reload();
                }, 1000); // 两秒后刷新页面
            })
        }

}
const handleAccept = (index, row) => {
    // console.log(row)
    if (controllInfo == "1" || controllInfo == "3" || controllInfo == "5") {
        updateIsExamine(row.id).then((res) => {
            ElMessage.success(`成功审核${row.name}`);
            // console.log("............................")
            // console.log(row.tid)
            // socket.initWebSocket(`ws://localhost:8081/notice/` + row.tid);
            // queryCondition.value.content = '课程审核通过';
            // init();
            setTimeout(() => {
                // init();
                location.reload();
            }, 1000); // 两秒后刷新页面
        })
    }
    else if (controllInfo == "2" || controllInfo == "4" || controllInfo == "6") {
        updateTextExamine(row.id).then((res) => {
            ElMessage.success(`成功审核${row.name}`);
            // console.log("............................")
            // console.log(row.tid)
            // socket.initWebSocket(`ws://localhost:8081/notice/` + row.tid);
            // queryCondition.value.content = '课程审核通过';
            // init();
            setTimeout(() => {
                // init();
                location.reload();
            }, 1000); // 两秒后刷新页面
        })
    }


}


</script>